<template>
    <div>

        <a-modal v-model="visible" on-ok="handleOk" @cancel="change11" style="width: 300px;" footer="">

            <a-tabs>
                <a-tab-pane key="1" tab="普通登录">
                    <div class="components-input-demo-presuffix">
                        <a-input ref="userNameInput" v-model="userName" placeholder="Basic usage">
                            <a-icon slot="prefix" type="user"/>
                            <a-tooltip slot="suffix" title="Extra information">
                                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)"/>
                            </a-tooltip>
                        </a-input>
                        <br/>
                        <br/>
                        <a-input-password placeholder="input password" v-model="password" style="margin-bottom: 20px">
                            <a-icon slot="prefix" type="lock"/>
                        </a-input-password>

                        <a-button type="primary" style="width: 100%; margin-bottom: 10px;" @click="handleOk">
                            登录
                        </a-button>
                        <a href="#" @click="register">
                            立即注册！
                        </a>

                        <a class="login-form-forgot" href="#" @click="forget">
                            忘记密码？
                        </a>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="2" tab="手机登录">
                    <div class="components-input-demo-presuffix">
                        <a-input ref="userNameInput" v-model="userName" placeholder="Basic usage">
                            <a-icon slot="prefix" type="user"/>
                            <a-tooltip slot="suffix" title="Extra information">
                                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)"/>
                            </a-tooltip>
                        </a-input>
                        <br/>
                        <br/>
                        <a-input-password placeholder="input password" style="width: 55%; margin-right: 5%; margin-bottom: 20px">
                            <a-icon slot="prefix" type="lock"/>
                        </a-input-password>
                        <a-button type="primary" style="width: 40%;">
                            获取验证码
                        </a-button>


                        <a-button type="primary" style="width: 100%; margin-bottom: 10px;" @click="handleOk">
                            登录
                        </a-button>
                        <a href="#" @click="register">
                            立即注册！
                        </a>
                        <a class="login-form-forgot" href="#" @click="forget">
                            忘记密码？
                        </a>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </a-modal>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                loading: false,
                userName:"",
                password: "",
            };
        },

        methods: {
            change11() {
                this.$store.commit("change", false)
            },
            handleOk() {
                this.loading = true;
                console.log(this.userName)
                this.$store.dispatch("IsLogin",{username:this.userName,password:this.password});

                setTimeout(() => {
                    this.loading = false;
                }, 1000);
            },
            register(){
                this.$store.commit("change", false);
                this.$store.commit("changeShowRegis",true);
            },
            forget(){
                this.$store.commit("change", false);
                this.$store.commit("changeShowForget",true);
            }

        },
        computed: {
            visible: {
                get: function () {
                    return this.$store.state.visible
                },
                set: (i) => {
                    console.log(i);
                }
            }
        }
    };
</script>

<style lang="less" scoped>
    /deep/ .ant-tabs-bar, .ant-tabs-top-bar {
        text-align: center;

    }

    /deep/ .ant-tabs-nav, .ant-tabs-nav-animated {
        /*width: 100%;*/
        text-align: center;
    }

    /deep/ .ant-tabs-tab {
        width: 130px;
    }

    /deep/ .ant-modal-content {
        width: 360px;
        margin: 0 auto;
    }

    /deep/ .ant-modal-footer {
        border-top: 0;
    }

    /deep/ .ant-btn {
        width: 100%;
    }

    .login-form-forgot {
        float: right;
    }
</style>